<template>
  <div>
    <div class="ksd-search-container">
      <div>
        <el-button type="success" icon="Plus" @click="handleAddVideo">添加</el-button>
        <el-button type="danger" icon="Delete" @click="handleBatchDel">批量删除</el-button>
      </div>
      <div>
        <el-cascader
          v-model="categoryArr"
          placeholder="请选择分类"
          clearable
          :options="categoryList"
          :props="props"
          show-all-levels
        />
      </div>
      <div>
        <el-select
          v-model="queryParams.status"
          clearable
          class="m-2"
          placeholder="请选择帖子状态"
          size="large"
        >
          <el-option v-for="item in statusOptions" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </div>
      <div>
        <el-date-picker
          v-model="searchDateArr"
          type="daterange"
          range-separator="To"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :size="size"
        />
      </div>
      <div style="display:flex;">
        <el-input v-model="queryParams.keyword" clearable size="small" placeholder="请输入分类名称" :suffix-icon="Search" />
        <el-button style="margin-left: 20px;" type="success" icon="Search" @click="handleSearch">搜索</el-button>
      </div>

    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      height="calc(100vh - 280px)"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column fixed type="selection" width="55" />
      <el-table-column fixed label="ID" prop="id" align="center" width="180" />
      <el-table-column label="标题" prop="title" width="340" />
      <el-table-column label="分类" width="320">
        <template #default="scope">
          <span v-for="(tag,index) in handleTagsTransfer(scope.row.categoryPname)" :key="tag" style="margin-right: 5px;">
            <el-tag class="ml-2" type="success">{{ tag }}/{{ handleTagsTransfer(scope.row.categoryCname)[index] }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="标签" width="320">
        <template #default="scope">
          <template v-if="scope.row.tags && scope.row.tags.length > 0">
            <span v-for="(tag) in handleTagsTransfer(scope.row.tags)" :key="tag" style="margin-right: 5px;">
              <el-tag class="ml-2" type="success">{{ tag }}</el-tag>
            </span>
          </template>
          <template v-else>暂无</template>
        </template>
      </el-table-column>
      <el-table-column label="浏览数" prop="views" width="80" />
      <el-table-column label="评论数" prop="comments" width="80" />
      <el-table-column label="允许评论" prop="comment" width="80" />
      <el-table-column label="发帖人" prop="nickname" width="100" />
      <el-table-column label="发帖时间" prop="createTime" width="220" />
      <el-table-column label="更新时间" prop="updateTime" width="220" />
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.status == 1" style="color:green">已发布</span>
          <span v-if="scope.row.status == 0" style="color:red">未发布</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"><el-icon>
            <Edit />
          </el-icon>编辑</el-button>
          <el-button
            size="small"
            type="danger"
            icon="Delete"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="display:flex;justify-content: center;">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--添加视频-->
    <add-video ref="addVideoRef" />
  </div>
</template>

<script setup>
import { useListVideo } from '@/usejs/videouse.js'
import AddVideo from './components/AddVideo.vue'
import { provide } from 'vue'
const {
  queryParams,
  props,
  statusOptions,
  categoryArr,
  searchDateArr,
  categoryList,
  tableData,
  total,
  addVideoRef,

  handleSearch,
  handleLoadData,
  handleCurrentChange,
  handleSizeChange,
  handleAddVideo,
  handleEdit
} = useListVideo()

// 注入刷新的方法
provide('handleLoadData', handleLoadData)

// 定义一个分类处理的方法
const handleTagsTransfer = (tags) => {
  return tags.split(',')
}
</script>

<style scoped lang="scss">
.ksd-search-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    background: #f7fbff;
}
</style>
